<template>
  <a-drawer width="60%" closable placement="right" :visible="visible" @close="visible = false">
    <div slot="title" class="g-flex g-y-center">
      <div style="color: #000000; font-weight: bold">{{ titleName }}</div>
    </div>
    <a-table
      :scroll="{ x: 500 }"
      :columns="showType==1?innerColumns:innerColumns2"
      :data-source="dataList"
      :rowKey="(record, index) => index"
      :pagination="pagination"
      :bordered="false"
      @change="tableHandleChange"
      :loading="tableLoading" 
    >
    <!--序号-->
    <template slot="index" slot-scope="text,record,index">
      <span>{{(pagination.pageNum-1)*pagination.pageSize+(index+1)}}</span>
    </template>

    <span slot="alertLevelName" slot-scope="tags">
      <a-tag :color="tags === '普通' ? '#39f' : (tags === '中度'?'#ff7004':'red')">
        {{ tags }}
      </a-tag>
    </span>
    </a-table>
  </a-drawer>
</template>

<script>
import { 
  SelectTgsTreatReview 
} from '@/api/modular/main/customer/cashier'

export default {
  props: {
    row_record: {
      type: Object,
      default: () => {
        {
        }
      },
    },
  },
  data() {
    return { 
      tableLoading: false,
      titleName: '开单记录',
      pagination: {
        pageNum: 1,
        pageSize: 15,
        current: 1,
        total: 20,
      },
      showType: 1,

     
      visible: false, 
      innerColumns: [
        { title: '序号', scopedSlots: { customRender: 'index' }, align: 'center', width: 80, fixed: 'left' },
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'itemName',
          width: 220,
          ellipsis: true,
        },
        {
          title: '科室',
          align: 'center',
          dataIndex: 'treatDeptName',
          width: 150,
          ellipsis: true,
          scopedSlots: { customRender: 'treatDeptName' },
        },
        {
          title: '就诊状态',
          align: 'center',
          dataIndex: 'review',
          width: 100,
          ellipsis: true,
        },
        {
          title: '治疗医生',
          align: 'center',
          dataIndex: 'treatDrName',
          width: 120,
          ellipsis: true,
        },
        {
          title: '预警状态',
          align: 'center',
          dataIndex: 'alertLevelName',
          width: 120,
          ellipsis: true,
          scopedSlots: {
            customRender: 'alertLevelName',
          },
        },
        {
          title: '经办人',
          align: 'center',
          dataIndex: 'recorder',
          width: 120,
          ellipsis: true,
        },
         
        {
          title: '治疗日期',
          align: 'center',
          dataIndex: 'treatDate',
          width: 180,
          ellipsis: true,
        },
         
      ], 
      innerColumns2: [
        { title: '序号', scopedSlots: { customRender: 'index' }, align: 'center', width: 80, fixed: 'left' },
        {
          title: '项目名称',
          align: 'center',
          dataIndex: 'itemName',
          width: 220,
          ellipsis: true,
        },
        {
          title: '科室',
          align: 'center',
          dataIndex: 'treatDeptName',
          width: 150,
          ellipsis: true,
          scopedSlots: { customRender: 'treatDeptName' },
        },
        {
          title: '就诊状态',
          align: 'center',
          dataIndex: 'treatState',
          width: 100,
          ellipsis: true,
        },
        {
          title: '治疗医生',
          align: 'center',
          dataIndex: 'treatDrName',
          width: 120,
          ellipsis: true,
        }, 
        {
          title: '经办人',
          align: 'center',
          dataIndex: 'recorder',
          width: 120,
          ellipsis: true,
        },
         
        {
          title: '治疗日期',
          align: 'center',
          dataIndex: 'treatDate',
          width: 180,
          ellipsis: true,
        },
         
      ], 
      dataList: [], 
    }
  },
   
  methods: {
    // change事件赋值
    valChange(value, record, index, t) {
      console.log(value)
      this.dataList[index][`${t}`] = value
      console.log(this.dataList)
      this.dataList = [...this.dataList]
    },

    callback(key) {
      console.log(key)
    },

    handleCancel() {
      this.lookImgVisible = false
    },
    // 查看图片
    lookImg() {
      this.lookImgVisible = true
    },
    // 进入页面调
    show(type = '') {
      this.visible = true  
      this.showType = type

      this.$nextTick(() => { 
        
        console.log('行数据', this.row_record)  
        this.pagination.pageNum = 1
        this.pagination.pageSize = 15
        this.pagination.current = 1 
        this.tableLoading = true 
        if(type == 2){
          this.listFunc(2)
        }else if(type == 1){
          this.listFunc(1)
        }
        
      })
    },
    // 请求
    listFunc(t = undefined) {
      // 明细
      let sendData = {
        clientId: this.row_record.clientId,
        type: t
      } 
      SelectTgsTreatReview(sendData).then(result => {
        if(result.code == 200){
          this.tableLoading = false
          this.dataList = result.rows
          this.pagination.total = Number(result.total)
        }else{
          this.$message.error(result.message)
        }
      })
    },

    // 点击分页
    tableHandleChange(pagination) {
      console.log(pagination)
      this.pagination.pageNum = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.pagination.current = pagination.current
      // this.listFunc()
    },
     

    findFunc(arr, type, typeNum) {
      let newData = arr.find((item) => {
        return item[`${type}`] == typeNum
      })
      if (newData != undefined) {
        return newData.url
      } else {
        return ''
      }
    },
    
    
  },
}
</script>

<style lang="less" scoped>
/deep/ .ant-drawer-body {
  padding: 10px 5px !important;
  // background-color: #f0f2f5;
}
// .table-padding-style {
//   padding: 50px 24px;
//   border-bottom: 1px solid #e8e8e8;
// }
/deep/ .ant-table-thead > tr > th,
/deep/ .ant-table-tbody > tr > td {
  padding: 10px 16px !important;
}
/deep/ .ant-table-tbody > tr:last-child > td {
  // border-bottom: 0 !important;
}
/deep/ .ant-tabs-card-content {
  img {
    width: 100% !important;
  }
}
/deep/ .colorBorder {
  border-color: red !important;
}
  
</style>

